<template>
  <div class="person">
    <div>{{ 'count: ' +  counterStore.count }}</div>
    <div>{{ 'doubleCount: ' +  counterStore.doubleCount }}</div>
    <div>{{ '解构的count: ' +  count }}</div>
    <div>{{ 'arr: ' +  counterStore.arr }}</div>
    <button @click="increment">更改count</button>
    <button @click="change">更改change</button>
    <button @click="reset">重置</button>
    <TestD />
  </div>
</template>

<script lang="ts" setup name="PiniaDemo">
import { useCounterStore  } from "@/stores/counter";
import TestD from "@/components/study/TestD.vue";
import { storeToRefs } from 'pinia'
const counterStore = useCounterStore();
// const { count } = counterStore;
const { count } = storeToRefs(counterStore);
const increment = () => {
  counterStore.increment();
};
const change = () => {
  // counterStore.count ++;
  // counterStore.$patch({
  //   count: counterStore.count + 1,
  //   arr: [1,2,3,4,5]
  // })
  counterStore.$patch((state) => {
    state.count ++;
    state.arr.push(6);
  })
};
const reset = () => {
  counterStore.$reset();
}

import { useRouter } from 'vue-router';
const router = useRouter();
console.log('router', router.currentRoute)
</script>